<template>
	<view class="list-container">
		<!-- 列表容器 -->
		<u-list>
			<!-- 列表项 -->
			<u-list-item v-for="(item, index) in listData" :key="index">
				<!-- 卡片组件 -->
				<u-card class="custom-card">
					<view slot="body" class="card-body" @click="handleCardClick()">
						<view>
							<text>今天9:00 (可租)</text>
						</view>
						<view>
							<image src="../../../static/title/u308.png"></image>
							<text>
								大众大众su
							</text>
							<u-tag text="闲置中" shape="circle"></u-tag>
						</view>
						<view class="v-3">
							<text>
								<text class="t1">粤</text>
								<text class="t2">A2516D</text>
							</text>
						</view>
					</view>
					<view slot="foot" class="card-foot">
						<image src="../../../static/carImage/u301.png" mode="" width="80px" height="80px"></image>
						<view class="bu">
							<u-button type="primary" text="申请" @click="handleButtonClick()"
								class="custom-button"></u-button>
						</view>
					</view>
				</u-card>
			</u-list-item>
		</u-list>
	</view>
</template>
<script>
	// import { UCard } from 'uview-ui'; 		
	export default {
		data() {
			return {
				// 列表数据
				listData: [{
						id: 1,
						title: '卡片标题1',
						subTitle: '副标题1',
						content: '这是第一个卡片的内容'
					},
					{
						id: 2,
						title: '卡片标题2',
						subTitle: '副标题2',
						content: '这是第二个卡片的内容'
					},
					{
						id: 3,
						title: '卡片标题2',
						subTitle: '副标题2',
						content: '这是第二个卡片的内容'
					},
					{
						id: 4,
						title: '卡片标题2',
						subTitle: '副标题2',
						content: '这是第二个卡片的内容'
					},
					{
						id: 5,
						title: '卡片标题2',
						subTitle: '副标题2',
						content: '这是第二个卡片的内容'
					},
				]
			};
		},
		methods: {
			handleCardClick(item) {
				// 处理卡片点击事件
				uni.navigateTo({
					url: "/pages/xiangqing/xiangqing"
				})
			},
			handleButtonClick() {
				// 处理按钮点击事件
				uni.navigateTo({
					url: "/pages/shenqing/result/result"
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
	.list-container {
		padding: 20px;
		margin-top: 236px;
	}

	.custom-card {
		width: 94%;
		height: 136px;
		border-radius: 10px;
		box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		padding: 10px;
		background-color: rgb(255, 255, 255);
	}

	.card-body {
		font-size: 14px;
		width: 200px;
		height: 100%;
	}

	// 时间
	.card-body view:first-child {
		font-size: 13px;
		color: gray;
	}

	// 图标名字状态
	.card-body view:nth-child(2) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 70px;

		image {
			width: 33px;
			height: 33px;
		}

		text {
			font-size: 18px;
			font-weight: bold;
		}

		.u-tag--primary[data-v-3732d7af] {
			background-color: black;
			border-width: 1px;
			border-color: #3c9cff;
		}
	}

	.card-body .v-3 {
		line-height: 40px;
		display: flex;

		.t1 {
			display: inline-block;
			width: 30px;
			height: 40px;
			background-color: rgb(59, 128, 235);
			color: aliceblue;
			font-size: 24px;
			text-align: center;
			border-radius: 5px;
			font-weight: bold;
			margin-right: 5px;
		}

		.t2 {
			color: rgb(59, 128, 235);
			font-weight: bold;
			font-size: 25px;
			display: inline-block;
		}
	}

	.card-foot {
		padding: 10px;

		image {
			width: 100px;
			height: 80px;
		}

		.foot-text {
			color: #007aff;
			font-size: 12px;
		}
		
	}
	.custom-button {
	  background-color: rgb(47, 76, 93); /* 自定义背景颜色 */
	  border-radius: 5px;
	}
</style>